<html>
	<head>
		<title>车辆团购</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<!-- <link rel="stylesheet" type="text/css" href="../css/mui.min.css"> -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<style type="text/css">
			.inquiry .userInfo ul li{
				height: 50px;
				line-height:50px;
			}
			.inquiry .userInfo ul li .car-right{
				width: calc(100% - 50px);
			}
			.inquiry .userInfo ul li .car-right input{
				text-align: right;
			}
			.inquiry .userInfo ul li .car-right input::placeholder{
				text-align: right;
			}
			.inquiry .userInfo ul li .car-right input:-ms-input-placeholder{
				text-align: right;
			}
			.inquiry .userInfo ul li .car-right input:-moz-placeholder{
				text-align: right;
			}
			.inquiry .userInfo ul li .car-right img{
				width: 6px;
			}
		</style>
	</head>
	<body>
		<header>
			<span class="back"></span>
			<p>翼马有车-资讯</p>
		</header>
		<!-- 提交的信息 -->
		<div class="articleDetail inquiry padd15">
		<div class="userInfo">
			<ul>
				<li class="flex_center_start">
					<label>车型</label>
					<div class="car-right flex_center_end" id="showUserPicker">
						<input type="text" readonly="readonly" placeholder="请选择询价车款" id="userResult" />
						<img src="../image/right01.png" />
					</div>
				</li>
				<li class="flex_center_start">
					<label>城市</label>
					<div class="car-right flex_center_end" id="showCityPicker">
						<input type="text" readonly="readonly" placeholder="请选择城市" id="cityResult" />
						<img src="../image/right01.png" />
					</div>
				</li>
				<li class="flex_center_start">
					<label>姓名</label>
					<input type="text" placeholder="请输入姓名" />
				</li>
				<li class="flex_center_start">
					<label>手机号</label>
					<input type="number" placeholder="请输入手机号" />
				</li>
			</ul>
			<p class="notice">点击提交即视为同意<b>《个人信息保护声明》</b></p>
			<button>我要询价</button>
		</div>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '董事长 叶文洁'
					}, {
						value: 'aaa',
						text: '总经理 艾AA'
					}, {
						value: 'lj',
						text: '罗辑'
					}, {
						value: 'ymt',
						text: '云天明'
					}, {
						value: 'shq',
						text: '史强'
					}, {
						value: 'zhbh',
						text: '章北海'
					}, {
						value: 'zhy',
						text: '庄颜'
					}, {
						value: 'gyf',
						text: '关一帆'
					}, {
						value: 'zhz',
						text: '智子'
					}, {
						value: 'gezh', 
						text: '歌者'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.value = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.value = items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
		</script>
	</body>
</html>